<!-- 协议签署 -->
<template>
  <div>
    <a-tabs :default-active-key="activeTab" @change="tabsChange">
      <a-tab-pane key="0" tab="全部"></a-tab-pane>
      <a-tab-pane key="1" tab="未读"></a-tab-pane>
      <a-tab-pane key="2" tab="已读"></a-tab-pane>
    </a-tabs>
    <ZgButton icon="" v-if="['0', '1'].includes(activeTab)" @click="toReads">一键已读</ZgButton>
    <ZgNewPage
      ref="page"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :headers="headers"
      :adminWidth="100"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h, i) in headers"
          :key="`column${i}`"
          :width="h.width === 0 ? 'auto' : h.width"
          align="center"
          :title="h.label"
        >
          <template slot-scope="record">
            <template v-if="record['6'] === '未读'">
              <span style="color: #1890ff">{{ record[h.code] }}</span>
            </template>
            <template v-else>
              {{ record[h.code] }}
            </template>
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeTab: '0',
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: false,
        showHeaderConfig: false,
        showAttachBtn: false
      },
      conditions: [
        // { code: 'name', compType: '单行文本', label: '状态', defaultVal: '', extra: { placeholder: '请输入合同编号' } }
      ],
      headers: [
        { code: '1', label: '标题', isShow: true, sort: 0 },
        { code: '2', label: '内容', isShow: true, sort: 0 },
        { code: '3', label: '时间', isShow: true, sort: 0 },
        { code: '4', label: '发件人', isShow: true, sort: 0 },
        { code: '5', label: ' ', isShow: true, sort: 0 },
        { code: '6', label: '状态', isShow: true, sort: 0 }
      ],
      dataBtns: [
        {
          key: 1,
          name: '查看',
          type: 'link',
          isShow: () => {
            return true
          }
        }
      ],
      extraBtns: [{ key: 1, name: '一键已读', icon: 'plus-circle', type: 'primary' }]
    }
  },
  methods: {
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      // 获取当前tab的值，设置请求参数
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [
        {
          key: '1',
          id: '1',
          1: '授信审批',
          2: '您有一条授信申请已审批通过',
          3: '2022-01-01',
          4: '山西焦煤集团有限责任公司',
          5: '待办',
          6: '未读'
        },
        {
          key: '2',
          id: '2',
          1: '授信审批',
          2: '您有一条授信申请已审批通过',
          3: '2022-01-01',
          4: '山西焦煤集团有限责任公司',
          5: '待办',
          6: '已读'
        }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    toAdmin (opt) {
      if (opt.key === 1) {
        alert('查看')
      }
    },
    toReads () {
      alert('一键已读')
    },
    tabsChange (key) {
      this.activeTab = key
      this.search()
    },
    onFilter (f, param) {
      console.log(f, param)
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders
        .filter((t) => {
          return t.isShow
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
